<template>
    <div>
        <van-nav-bar title="我的优惠券" left-text="返回" left-arrow @click-left="onClickLeft" />
    </div>
    <van-tabs v-model:active="active" @click-tab="onClickTab">
        <van-tab title="可使用" name="0"></van-tab>
        <van-tab title="已使用" name="3"></van-tab>
        <van-tab title="已过期" name="2"></van-tab>
    </van-tabs>
    <div v-for="userCouponInfo in userCouponInfList" :key="userCouponInfo.id" v-show="couponDivShow">
        <van-cell-group style="margin-bottom: 8px;">
            <van-cell :title="userCouponInfo.faceValueStr" :value="userCouponInfo.specialStr" :label="userCouponInfo.name"
                style="background-color: rgb(236, 51, 51)"  
                 />
        </van-cell-group>
    </div>
    <div v-for="userCouponInfo in userCouponInfList" :key="userCouponInfo.id" v-show="couponDivExShow">
        <van-cell-group style="margin-bottom: 8px;">
            <van-cell :title="userCouponInfo.faceValueStr" :value="userCouponInfo.specialStr" :label="userCouponInfo.name"
                style="background-color: rgb(236, 51, 51)" />
        </van-cell-group>
    </div>
</template>
<script setup>
import { ref } from 'vue'
import { UserCouponList } from '@/api/market.js'
var userCouponInfList = ref([])
var couponDivShow=ref(false)
var couponDivExShow=ref(false)
var active=ref(0)
var queryM = ref({
    currentPage: 1,
    pageSize: 7,
    status: 0
})


const onClickLeft = () => history.back();

const onClickTab = ({ name }) => getUserCouponInf(name);

getUserCouponInf(0);
function getUserCouponInf(data) {
    couponDivShow.value=true;
    couponDivExShow.value=false;
    userCouponInfList.value=[];
    queryM.value.status=data;
    UserCouponList(queryM.value)
        .then(res => {
            if (res.data.code == 200000) {
                userCouponInfList.value = res.data.data.data
            } else {
                //错误提示框
            }
        })
}  
 
</script>
<style>
/* .is-gray {
  filter: grayscale(100%);
} */

.van-cell__title {
    font-size: 18px;
    color: aliceblue;
    
}
.van-cell-group__title{
    font-size: 20px;
    font-family: 'Courier New', Courier, monospace;
    font-weight: bolder; 
    background-color: rgb(236, 51, 51)
}
.van-cell__label {
    font-size: 14px;
    color: black
}

.van-cell__value {
    font-size: 16px;
    font-weight: bolder; 
    color: #CFAE00
}
</style>